<!-- 左侧列表式模板 -->
<template>
  <div class="template-body">
    <section class="ad">
        <classifyAd :propsData="propsData"></classifyAd>
    </section>
    <section class="nav-list">
        <div class="nav-item" v-for="item in catList" :key="item.id" @click.stop="toCat(item)">
            <image :src="item.pic_url" alt="">
        </div>
    </section>
  </div>
</template>

<script>
import classifyAd from "../components/classifyAd/index.vue";

export default {
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    catList: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  mixins: [],
  components: {classifyAd },
  data() {
    return {};
  },
  mounted() {},
  watch: {},
  computed: {},
  methods: {
    // 跳转分类页面
    toCat(e) {
      uni.navigateTo({
        url: "/other/list/list?cat_id=" + e.id,
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.template-body {
  width: 100%;
  height: 100%;
  padding-top: 12rpx;
  .ad {
      width: 100%;
  }
  .nav-list {
      padding: 0 32rpx;
      .nav-item {
          width: 100%;
          height: 160rpx;
          border-radius: 10rpx;
          overflow: hidden;
          margin-bottom: 32rpx;
          background-color: #fff;
          image {
              width: 100%;
              height: 100%;
          }
      }
  }
}
</style>
